<template>
  <div v-if="detail">
    <!-- 头部 -->
    <div class="top-container">
      <div class="app-main-top-box">
        <div class="title">活动效果</div>
        <el-button size="medium" round @click="back">返回</el-button>
      </div>

      <!-- 活动内容 开始 -->
      <div class="activity">
        <div class="activity-image">
          <img v-if="detail.image" :src="fileBaseUrl+detail.image" alt>
        </div>
        <ul class="activity-info">
          <li class="cell-item">
            <div class="label">活动主题：</div>
            <div class="item">{{ detail.theme }}</div>
          </li>
          <li class="cell-item">
            <div class="label">活动类型：</div>
            <div class="item">
              {{ detail.onlyMemberDay ? '会员日' : '' }}{{ $store.state.setting.marketingActivityTypeKeyOptions[detail.activityType]||'-' }}
            </div>
          </li>
          <li class="cell-item">
            <div class="label">活动状态：</div>
            <div class="item">
              <el-tag v-if="detail.status===1" size="mini" type="success">启用中</el-tag>
              <el-tag v-if="detail.status===2" size="mini" type="danger">已暂停</el-tag>
              <el-tag v-if="detail.status===3" size="mini" type="info">已终止</el-tag>
            </div>
          </li>
          <li class="cell-item">
            <div class="label">活动时间：</div>
            <div class="item">{{ detail.startTime+" ~ "+detail.endTime }}</div>
          </li>
          <li class="cell-item">
            <div class="label">参与时间：</div>
            <div class="item">
              <div v-if="detail.useRule===1">有效期内所有时间都可以参与活动</div>
              <div v-else-if="detail.useRule===2||detail.useRule===3">
                <div v-if="detail.useRule===2">{{ detail.ruleDataWeek }}</div>
                <div v-else-if="detail.useRule===3">
                  <div v-for="(item,index) in detail.ruleDataDate" :key="'date'+index">{{ item.date[0]+" ~ "+item.date[1] }}</div>
                </div>
                <div v-for="(item,index) in detail.ruleDataTime" :key="'time'+index">{{ item.time[0]+" ~ "+item.time[1] }}</div>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <!-- 活动内容 结束 -->
      <div class="tab">
        <el-tabs v-model="tabName">
          <el-tab-pane label="数据概览" name="total" />
          <el-tab-pane label="参与历史" name="record" />
          <el-tab-pane v-if="[5,6,7,8].includes(detail.activityType)" label="关联订单信息" name="singleOrder" />
        </el-tabs>
      </div>
    </div>

    <!-- 内容展示 开始 -->
    <div class="app-main-content-box">
      <ActivitySingleStatistics v-if="tabName==='total'&&[5,6,7,8].includes(detail.activityType)" :activity-detail="detail" />
      <ActivityStatistics v-else-if="tabName==='total'" :activity-detail="detail" />
      <ActivityRecords v-if="tabName==='record'" :activity-detail="detail" />
      <ActivitySingleOrder v-if="tabName==='singleOrder'" :activity-detail="detail" />
    </div>
    <!-- 内容展示 结束 -->
  </div>
</template>

<script>
import ActivityStatistics from './ActivityStatistics'
import ActivitySingleStatistics from './ActivitySingleStatistics'
import ActivityRecords from './ActivityRecords'
import ActivitySingleOrder from './ActivitySingleOrder'
import { mapGetters } from 'vuex'
// import { getActivityStatistics, getActivityRecords } from '@/api/marketing'
// import { getFilterFormPastTime } from '@/utils/format'
export default {
  components: {
    ActivitySingleStatistics,
    ActivityStatistics,
    ActivityRecords,
    ActivitySingleOrder
  },
  data() {
    return {
      // 配置
      resolve: null,
      reject: null,
      tabName: 'total',
      // paginationConfig: {
      //   direction: 'center', // 分页位置
      //   layout: 'total, sizes, prev, pager, next, jumper', // 分页类型
      //   pageSizes: [10, 20], // 分页pages
      //   total: 0,
      //   page: 1, // 页数-默认1
      //   pageSize: 10 // 每页条数-默认10
      // },
      // quickDateOptions: [
      //   {
      //     val: 1,
      //     label: '今天'
      //   },
      //   {
      //     val: 'yesterday',
      //     label: '昨天'
      //   },
      //   {
      //     val: 7,
      //     label: '近7天'
      //   },
      //   {
      //     val: 15,
      //     label: '近15天'
      //   },
      //   {
      //     val: 30,
      //     label: '近30天'
      //   },
      //   {
      //     val: 'nowMonth',
      //     label: '本月'
      //   }
      // ],
      // quickDateIndex: 0,
      // 状态
      // loading: false,
      // 数据
      listFilterForm: {
        activityId: ''
      },
      // totalFilterForm: {
      //   date: ''
      // },
      detail: '',
      list: []
      // total: {}
    }
  },
  computed: {
    ...mapGetters(['fileBaseUrl'])
  },
  mounted() {

  },
  methods: {
    /**
       * 获取数据
       */
    // 获取数据
    fetchData(row) {
      // this.listFilterForm.activityId = row.id
      // 格式化数据
      this.formatData(JSON.parse(JSON.stringify(row)))
      // 请求
      // if (this.tabName === 'record') {
      //   this.getRecords(1)
      // } else {
      //   // this.getTotal()
      // }
      return new Promise((resolve, reject) => {
        this.resolve = resolve
        this.reject = reject
      })
    },

    formatData(data) {
      // 时间
      if (data.useRule !== 1) {
        const ruleDataDateArr = []
        const ruleDataTimeArr = []
        data.ruleDataTime = data.ruleDataTime.split(',')
        data.ruleDataTime.forEach((v) => {
          ruleDataTimeArr.push({
            time: [
              this.$options.filters.minsToHourMins(v.split('-')[0]),
              this.$options.filters.minsToHourMins(v.split('-')[1])
            ]
          })
        })
        data.ruleDataTime = ruleDataTimeArr
        switch (data.useRule) {
          case 2:
            data.ruleDataWeek = this.$options.filters.weekNum2WeekStr(
              data.ruleDataWeek
            )
            data.ruleDataDate = [{ date: '' }]
            break
          case 3:
            data.ruleDataTime = [{ time: ['00:00', '23:59'] }]
            data.ruleDataDate = data.ruleDataDate.split(',')
            data.ruleDataDate.forEach((v) => {
              ruleDataDateArr.push({
                date: [v.split(':')[0], v.split(':')[1]]
              })
            })
            data.ruleDataDate = ruleDataDateArr
            break
        }
      }
      // if ([5, 6, 7, 8].includes(data.activityType)) this.tabName = 'record'
      this.detail = data
    },

    /**
       * 获取数据
       */
    // 获取统计
    // getTotal() {
    //   this.loading = true
    //   const params = { activityId: this.detail.id }
    //   getActivityStatistics(params)
    //     .then((res) => {
    //       this.total = res.data
    //     })
    //     .catch((err) => {})
    //     .finally(() => {
    //       this.loading = false
    //     })
    // },

    // // 获取列表
    // getRecords(
    //   page = this.paginationConfig.page,
    //   pageSize = this.paginationConfig.pageSize
    // ) {
    //   this.loading = true
    //   // 加入page
    //   this.listFilterForm.page = page
    //   this.listFilterForm.pageSize = pageSize
    //   const params = Object.assign({}, this.listFilterForm)
    //   // 清除多余字段
    //   for (const key in params) {
    //     if (params[key] === '' || params[key] === 'all') {
    //       delete params[key]
    //     }
    //   }
    //   getActivityRecords(params)
    //     .then((res) => {
    //       this.list = res.data.list
    //       this.paginationConfig.total = res.data.total
    //       this.paginationConfig.page = res.data.pageNum
    //     })
    //     .finally(() => {
    //       this.loading = false
    //     })
    // },
    //
    // // 分页sizes改变
    // sizesChange() {
    //   this.getRecords()
    // },
    //
    // // 分页page改变
    // pageChange() {
    //   this.getRecords()
    // },

    /**
       * 按钮组
       */
    // 更改tab
    // changeTab(tab, event) {
    //   if (tab.name === 'record') {
    //     this.getRecords(1)
    //   } else {
    //     this.getTotal()
    //   }
    // },

    // 返回
    back() {
      this.resolve && this.resolve()
    }

    // 便捷日期查询
    // async quickDateSearch(days, index) {
    //   this.quickDateIndex = index
    //   const dateArr = await getFilterFormPastTime(days)
    //   this.totalFilterForm.date = dateArr
    //   this.getTotal()
    // },

    /**
       * 状态组
       */
    // 日期改变
    // dateChange(val) {
    //   this.quickDateIndex = ''
    // }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
  /* tab */
  // ::v-deep {
  //   .el-tabs__header {
  //     margin-bottom: 0;
  //     background-color: #fff;
  //     border-radius: 0 0 5px 5px;
  //   }
  //   .el-tabs__nav-wrap::after {
  //     background-color: #fff;
  //   }
  //   .el-tabs__active-bar {
  //     height: 4px;
  //   }
  // }

  /* 头部 */
  .top-container {
    padding: 24px 30px 0;
    border-radius: 5px 5px;
    background-color: #fff;
    margin-bottom: 10px;
  }

  /* 活动内容 */
  .activity {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    font-size: 14px;
    &-image {
      width: 350px;
      height: 220px;
      margin-right: 20px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    }
    &-info {
      flex: 1;
      .cell-item {
        display: flex;
        .label {
          flex: 0 0 100px;
          color: #888888;
          text-align: center;
        }
        .item {
          flex: 1 1 auto;
          color: #000000;
        }
      }
      .cell-item:not(:last-child) {
        margin-bottom: 10px;
      }
    }
  }

</style>
